<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
</head>

<body>
    item

    <p><a href="./05-cart.html">
            购物车 <span class="cart-num-span">0</span>
        </a></p>
    <div id="box">
        <!-- <h1></h1>
        <p></p> -->

    </div>
    <script type="module">
        /*
            1-获取 url 中商品id
            2- 根据id获取商品详情
            3-展示页面中
        
        */
        import axios from './js/axios.min.js';
        let baseURL = 'http://localhost:3000'
        axios.defaults.baseURL = baseURL;



        // 1-获取 url 中商品id
        // location.search
        let paramsObj = new URLSearchParams(location.search);
        let pid = paramsObj.get('pid');
        console.log(pid);
        // 2- 根据id获取商品详情

        let detailAPI = '/api/front/articles/' + pid;
        axios.get(detailAPI).then(r => {

            // 服务器返回的数据--r.data.data  商品对象
            console.log(r.data);
            // r.data.data.map()

            let str = `
                <h1>${r.data.data.title}</h1>
                <p>${r.data.data.content}</p>

                <input type="number" value="1" class="pnum">
                <button class="cart-add" onclick="cartAddHandler()">加入购物车</button>
            `;
            document.querySelector("#box").innerHTML = str;
            let cartAddBtn = document.querySelector('.cart-add');
            console.log(cartAddBtn);

        })


        /*
            加入购物车功能

            给加入购物车按钮添加一个点击事件
                点击的时候- 获取pnum 和pid ，然后发起加入购物车的请求
        */
        let cartAddBtn = document.querySelector('.cart-add');
        // 
        // Cannot（不能） set(设置) properties （属性） of null（null） (setting 'onclick')
        // 不能设置null的 onclick属性
        // cartBtnAdd 是null
        // 因为请求是异步的，请求成功以前 就获取了按钮-获取不到--
        // 1- 
        // cartAddBtn.onclick = function () {
        //     console.log('cart add');
        // }
        console.log(cartAddBtn);

        let cartAPI = '/api/front/carts'

        window.cartAddHandler = async function () {


            //加入购物车接口--需要登录以后才能调用--需要设置 token 

            let token = localStorage.getItem('token');
            console.log(token);
            // 设置到请求头的 authora  
            // authorization
            axios.defaults.headers.common['Authorization'] = "bearer " + token;



            // console.log('');
            // 获取pnum 和pid ，然后发起加入购物车的请求
            console.log(pid);
            let pnumber = document.querySelector('.pnum').value;

            // console.log(pid, pnum);

            // let r = await axios.post(cartAPI, { pid: pid, pnum: pnum })
            let r = await axios.post(cartAPI, { pid, pnum: pnumber })
            layui.use(function () {
                layui.layer.msg(r.data.msg)
            })
            // 加入购物车成功以后 显示当前购物车中商品的总数量
            showCartNum()

        }

        // 页面加载完毕以后 显示当前购物车中商品的总数量
        showCartNum()



        async function showCartNum() {
            let token = localStorage.getItem('token');
            console.log(token);
            // 设置到请求头的 authora  
            // authorization
            axios.defaults.headers.common['Authorization'] = "bearer " + token;
            let pagesize = 1000;
            let r = await axios.get(cartAPI, { params: { pagesize } });
            console.log(r.data.data);

            // 遍历 购物车数组--让数组每一个元素 pnum属性都累加
            // let sum = r.data.data.reduce((sum, v) => sum + v.pnum, 0)
            let sum = 0;
            r.data.data.forEach(v => {
                sum = sum + v.pnum
            })
            console.log(sum);
            document.querySelector('.cart-num-span').innerHTML = sum



        }



    </script>

</body>

</html>